<template>
  <!-- 状态新增 -->
  <div class="add">
    <Title title="核酸新增"></Title>
    <el-form
      ref="formRef"
      :model="form"
      status-icon
      :rules="rules"
      label-width="120px"
      label-position="top"
    >
      <el-form-item label="请选择你做核酸的日期" prop="date">
        <div class="block">
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="选择一个日期"
            :disabled-date="disabledDate"
            :shortcuts="shortcuts"
          />
        </div>
      </el-form-item>
      <el-form-item label="核酸结果" prop="res">
        <el-radio-group v-model="form.res">
          <el-radio label="阴性" />
          <el-radio label="阳性" />
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">提交表单</el-button>
        <el-button @click="resetForm(formRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { ShowErrorMsg } from "@/utils";
import { Ajax } from "@/api";
import { useRouter } from "vue-router";
import type { FormInstance } from "element-plus";
const formRef = ref<FormInstance>(); //规定formRef的数据类型
const router = useRouter();
const form = reactive<{ date: string; res: string }>({
  date: "",
  res: "阴性",
}); //date是date类型的数据
const rules = reactive({
  date: [
    {
      required: true,
      message: "请选择",
      trigger: "change",
    },
  ],
  res: [
    {
      required: true,
      message: "请选择",
      trigger: "change",
    },
  ],
});
const submitForm = () => {
  formRef.value.validate(async (valid: any) => {
    //整个表单校验
    if (valid) {
      let res: any = await Ajax.nucadd(form);
      if (res.code == 200) {
        router.push({ name: "health-nuc" });
      } else {
        ShowErrorMsg("校验失败");
      }
    }
  });
};
const resetForm = (formEl: any) => {
  if (!formEl) return;
  formEl.resetFields();
};
const shortcuts = [
  //快捷选择
  {
    text: "今天",
    value: new Date(),
  },
  {
    text: "昨天",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    },
  },
  {
    text: "一周前",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      return date;
    },
  },
];
const disabledDate = (time: Date) => {
  //无法选中的日期，在今天之后
  return time.getTime() > Date.now();
};
</script>
<style scoped lang="scss">
.add {
  width: 100%;
  min-height: 100%;
  .el-tabs--border-card {
    width: 33%;
  }

  .demo-tabs {
    width: 100%;
    min-height: 100%;
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
}
</style>
